<span *ngIf="identity$ | async as account">
  <h2>Contacts of {{ account.firstName }} {{ account.lastName }}</h2>
</span>
<div *ngIf="(msg$ | async)" class="msg">{{(msg$ | async)}}</div>
<button type="button" class="btn" (click)="newContact()">New Contact</button>
<form *ngIf="contact$ | async" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
    <h3 highlight>{{ (contact$ | async)?.name | awesome }}</h3>
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" formControlName="name" class="form-control" required>
        <p *ngIf="contactForm.controls.name.errors" class="alert alert-danger">Name is required!</p>
    </div>
    <br>
    <button type="submit" class="btn btn-default" [disabled]="!contactForm.valid">Save</button>
    <button type="button" class="btn" (click)="nextContact()" [disabled]="!contactForm.valid">Next Contact</button>
    <button type="button" class="btn" (click)="cancel()" [hidden]="adding" [disabled]="contactForm.valid">Cancel</button>
</form>


<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
